import { auth } from '@clerk/nextjs/server';
import { Metadata } from 'next';

import { extractPersonaMetadata } from '@/utils/embeds';

import PersonaPageClient from './PersonaPageClient';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata(props: Props): Promise<Metadata | null> {
  const params = await props.params;
  // read route params
  // fetch data
  let persona;
  try {
    persona = (await getData(params.slug)) as any;
  } catch (e) {
    return null;
  }

  if (!persona) return null;
  return extractPersonaMetadata(persona);
}

async function getData(slug: string) {
  let retries = 0;
  const { getToken } = await auth();
  let accessToken = null;
  try {
    accessToken = await getToken();
  } catch (e) {
    console.log(e);
  }

  while (retries < 4) {
    const res = await fetch(
      `${process.env.API_BASE}/api/persona/get-persona/${slug}/`,
      {
        cache: 'no-store',
        headers: {
          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
        },
      }
    );

    if (!res.ok) {
      const delay = 200 * Math.pow(2, retries);
      await new Promise((f) => setTimeout(f, delay));
    } else {
      return res.json();
    }
    retries += 1;
  }
  throw new Error('Failed to fetch data');
}

export default async function PersonaPage(props: Props) {
  const params = await props.params;
  const session = await auth();

  if (!session?.userId) {
    return <PersonaPageClient personaId={params.slug} isLoggedOut={true} />;
  }

  try {
    const data = await getData(params.slug);
    return <PersonaPageClient personaId={data.id} isLoggedOut={false} />;
  } catch (e) {
    return (
      <div className='p-4 font-serif text-lg'>Error loading Persona data</div>
    );
  }
}